<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="test">{{test+"新修改的数据"}}
        <ul v-for="item of items">
            <li>{{item}}</li>
        </ul>
        <button v-on:click="change">通过这个我们对比以下vue作为一个动态模板语言跟静态模板语言的区别</button>
    </div>

    <div id="test2">
        姓 <input type="text" v-model=firstName></input>
        名<input type="text" v-model=lastName></input>
        全名 {{fullName}}
        <<textarea id="" cols="30" rows="10" v-model=textContent></textarea>
            {{textContent}}
            <input type="radio" value="男" v-model="gentel">男</input>
            <input type="radio" value="女" v-model="gentel">女</input>
            <input type="checkbox" value="游泳" v-model="hobbys">游泳</input>
            <input type="checkbox" value="跳水" v-model="hobbys">跳水</input>
            <input type="checkbox" value="足球" v-model="hobbys">足球</input>
            <input type="checkbox" value="跳舞" v-model="hobbys">跳舞</input>

            <select v-model="location">
                <option>广东</option>
                <option>新疆</option>
                <option>江苏</option>
        </select>{{location}} {{gentel}} {{hobbys}}
    </div>
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var vm2 = new Vue({
            el: "#test2",
            data: {
                firstName: "",
                lastName: "",
                fullName: "",
                textContent: "建议",
                hobbys: [],
                gentel: "",
                location: ""
            },
            watch: {
                firstName: function (val) {
                    this.fullName = val + " " + this.lastName;
                },
                lastName: function (val) {
                    this.fullName = this.firstName + " " + val;
                },
            }
        })






        //大家回顾一下，是不是跟我们handlebar很像，一样是填充我们标记的数据
        //我给大家10分钟,大家自己打开我们做过的handlebar页面对比以下.
        //他们之间最大的区别是 vue是动态,handlebar是静态的.
        //大家能明白当中的区别么?
        //我们handlebars是一个静态模板引擎
        //例如我现在从数据库拿到了是一个数据数组
        //例如 essays这样子，然后把handlebars只是直接根据 essays的内容，然后再模板中寻找相应的标识符去替换
        //但是vue不是
        //vue是我们html的标识符直接跟我们data中的数据建立联系，只要data中的数据改变，直接可以改变这个数据在html的标识符中的值。


        var data = {
            test: "内容",
            items: ["第一项", "第二项", "第三项"]
        };
        var vm = new Vue({
            el: "#test",
            data: data,
            created: function () {
                console.log("created");
            },
            mounted: function () {
                console.log("mounted");
            },
            updated: function () {
                console.log("updated");
            },
            destoryed: function () {
                console.log("destoryed");
            },
            methods: {
                change: function () {
                    // console.log(123);
                    //vue直接修改与他绑定的那个dom元素 
                    this.test = "123";
                    //jquery修改dom元素内容
                    //取得dom元素
                    //innerText/innerHtml 赋值
                }
            }
        })

        //监听change事件
        //change事件响应函数
        //watchers[{el:$test,callback:function()}]
        //function(newVal,oldVal){
        //    if(newVal==oldVal){
        //       return;
        //    }
        //     for watcher in watchers
        //          watcher.callback()
        //}
        vm.$watch("test", function (newVal, oldVal) {
            console.log("oldVal:" + oldVal);
            console.log("newVal:" + newVal);
            //$.ajax
        })


        var btn = $("button");
        btn.on("click", function (e) {
            // console.log(data);
            //  console.log(vm.$data);
            //   console.log(vm.$el);



            //事件系统（观察者模式）
            //事件监听change，自动修改



            //  

            // console.log(vm.$data === data)

        })

        //1.建立一个实例(钩子) new Vue({el:"#test"})
        //2.填充数据,给data属性设置以下内容
        // var test = new Vue({
        //     el: "#test",
        //     data: {
        //         test: "内容",
        //         items:["第一项","第二项","第三项"]
        //     },
        // })
        //3.在html文档中应用指令
        //例如:{{}}
        //例如有特殊功能的指令<ul v-for="item of items">
        //4.通过以上操作,我们可以在前端渲染模板了
    </script>
</body>

</html>